import React, { useEffect } from 'react';

// 引入样式
// import styled from 'styled-components';
import '@/assets/css/cinema.css'

import { getCinemaLocFn } from '@/api/cinema';


const Index = () => {
	useEffect(() => {
		// 发起数据请求
		getCinemaLocFn().then((res) => {
			console.log(res);
			if (res.data.errNo === 0) {
				console.log(res.data.paginate);
				const showLocArr = res.data.paginate.slice(0, 30)
				console.log(showLocArr);

				// 注意：在react脚手架中，全局对象必须前面加window
				// 01：创建地图实例
				var map = new window.BMapGL.Map("container");
				// 02：创建一个地图中心坐标点
				var point = new window.BMapGL.Point(116.404, 39.915);
				// // 03：地图初始化，同时设置设置地图展示级别
				map.centerAndZoom(point, 15);

				// // 04：开始鼠标滚轮的缩放
				map.enableScrollWheelZoom(true);

				// // 05：设置地图的倾斜角度
				map.setHeading(64.5);   //设置地图旋转角度
				map.setTilt(73);       //设置地图的倾斜角度

				showLocArr.map(({ gpsaddress }) => {
					// 06：设置地图的点坐标
					var point = new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]);
					// 07：根据点坐标给地图设置marker标记
					var marker = new window.BMapGL.Marker(point);        // 创建标注   
					map.addOverlay(marker);                     // 将标注添加到地图中
					// 08：创建信息窗口
					var opts = {
						width: 200,
						height: 50,
						title: '当前位置'
					};

					// 创建地理编码实例      
					var myGeo = new window.BMapGL.Geocoder();
					// 根据坐标得到地址描述    
					myGeo.getLocation(new window.BMapGL.Point(gpsaddress.split(',')[0], gpsaddress.split(',')[1]), function (result) {
						if (result) {
							// alert(result.address);
							// 09：创建信息窗口对象(每个坐标点marker,都对应一个地址描述，这样需要用到逆地址解析)
							var infoWindow = new window.BMapGL.InfoWindow(result.address, opts);
							// 点标记添加点击事件
							marker.addEventListener('click', function () {
								map.openInfoWindow(infoWindow, point); // 开启信息窗口
							});
						}
					});
				})
			}
		})



	})


	return (
		<div id='container'>
			影院列表
		</div>
	);
}

// const Contain = styled.div`
// 	width: 100%;
// 	height: 100%;
// `
export default Index;
